<template>
  <div class="footerC">
      <ul class="ulsan">
          <li class="lisan" v-show="item.permissions" v-for="(item,index) in items" :key='index' v-bind:class="{'itemActive':item.state}" 
           @click="changePage(index)">
              <!-- <i :class="item.icon"></i><br> -->
              <img :src="item.icon" alt=""><br>
              <span >{{item.text}}</span>
          </li>
      </ul>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
      return {
          items:[
              {
                  text:'分检员',
                  icon:'',
                  state:true,
                  href:'/inspection',
                  permissions:true
              },
              {
                  text:'维修员',
                  icon:'',
                  state:false,
                  href:'/repairman',
                  permissions:true
              },
              {
                  text:'配件库',
                  icon:'',
                  state:false,
                  href:'/parts',
                  permissions:true
              },
              {
                  text:'我的',
                  icon:'',
                  state:false,
                  href:'/mine',
                  permissions:true
              }
          ]
      }
  },
  mounted: function(){
      this.changePage(localStorage.getItem("pageId"));
      //menus接口对接
    this.$fetch(this.$root.domainIp+'1.0/msys/menus')
      .then((response) => {
        let json_data = JSON.parse(this.decrypt(response.data));
        for(let i = 0; i < json_data.data.length;i++){
            if(json_data.data[i].child[0].child[0].webId == "page/appxorttotal"){
                this.items[0].permissions = true;
            }else if(json_data.data[i].child[0].child[0].webId == "page/appmattotal"){
                this.items[1].permissions = true;
            }else if(json_data.data[i].child[0].child[0].webId == "page/apppartmanager"){
                this.items[2].permissions = true;
            }
        }
      })
  },
  methods:{
      changePage:function(index) {
          let arr = this.items;
          arr.forEach(item => {
            item.state = false;
          });
          this.$set(this.items[index],'state', true)
          this.$router.push({path:this.items[index].href});
      }, 
  }
}
</script>

<style scoped>
.footerC {
  width:100%;
  height: 0.15rem;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.ulsan{
    width:100%;
    height: 0.8rem;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 0.02rem solid #E6E6E6;
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
    background: #f3f1f1;
    z-index: 99;
}
.lisan{
    float: left;
    width: 25%;
    height: 30px;
}
.itemActive{
    color: #ff5000;
}
img{
    display: inline-block;
    width: 0.5rem;
    padding-bottom: 0.12rem;
}
</style>
